<!--
 * @Author: lp
 * @Date: 2022-02-08 13:54:35
 * @LastEditTime: 2022-06-15 16:55:55
 * @LastEditors: lp 654528967@qq.com
 * @Description: 模板操作
 * @FilePath: //nien-vue3-admin//src//components//customOperation//index.vue
-->
<script lang="tsx">
import { defineComponent, h, withDirectives, resolveDirective, DirectiveArguments, Directive } from 'vue'
import { ElButton, ElCol } from 'element-plus'

export default defineComponent({
  components: { ElButton },
  props: {
    options: {
      default: () => ({}),
      type: Object,
    },
  },
  setup(props) {
    return () => props.options
      && props.options.map((el: { title: string; directives: [] }, index) => {
        const { title, directives, ...attrs } = el
        let dir: DirectiveArguments = []
        if (Array.isArray(directives) && directives.length > 0) {
          dir = directives.map((el: [any]): [Directive] => {
            const [dir, ...other] = el
            dir as string
            const resolvedDir = resolveDirective(dir)
            if (!resolvedDir) throw new Error('指令解析错误')
            return [resolvedDir, ...other]
          })
        }
        return withDirectives(h(ElCol, { span: 1.5, style: 'margin: 5px 0;', key: index }, { default: () => h(ElButton, { type: 'primary', ...attrs }, { default: () => title }) }), dir)
      })
  },
})
</script>
